<template>
	<div id="coupon">
		<!-- 优惠券管理 -->
		<el-row class="role-head">
			<el-input placeholder="请输入优惠券标题" v-model="cTitle"></el-input>
			<el-select v-model="value" placeholder="请选择优惠券类型">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-select v-model="value2" placeholder="请选择优惠券状态">
				<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button type="primary" icon="el-icon-search" @click="searchCou">查询</el-button>
			<el-button type="primary" icon="el-icon-edit" @click="addCoupon">添加</el-button>
			<el-button type="primary" icon="el-icon-bottom">导出</el-button>
		</el-row>
		<!-- 优惠券的列表 -->
		<template>

			<el-table :data="tableData" style="width: 100%" :header-cell-style="{textAlign: 'center'}"
				:cell-style="{textAlign:'center'}">
				<el-table-column prop="id" label="优惠券id" sortable>
				</el-table-column>
				<el-table-column prop="name" label="优惠券名称">
				</el-table-column>
				<el-table-column prop="desc" label="介绍">
				</el-table-column>
				<el-table-column prop="tag" label="标签">
				</el-table-column>
				<el-table-column label="最低消费">
					<template slot-scope="scope">
						满{{scope.row.min}}元可用
					</template>
				</el-table-column>
				<el-table-column label="满减金额">
					<template slot-scope="scope">
						减免{{scope.row.discount}}元
					</template>
				</el-table-column>
				<el-table-column prop="limit" label="每人限领">
				</el-table-column>
				<el-table-column label="商品使用范围">
					<template slot-scope="scope">
						{{scope.row.goodsType==0?'全场通用':''}}
					</template>
				</el-table-column>
				<el-table-column label="优惠券类型">
					<template slot-scope="scope">
						{{scope.row.type==0?'通用领券':scope.row.type==1?'注册赠券':'兑换码'}}
					</template>
				</el-table-column>
				<el-table-column label="优惠券数量">
					<template slot-scope="scope">
						{{scope.row.total==0?'不限量':scope.row.total}}
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status==0">正常</el-tag>
						<el-tag type="danger" v-if="scope.row.status==1">已过期</el-tag>
						<el-tag type="info" v-if="scope.row.status==2">已下架</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250px">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="handleDetail(scope.$index, scope.row)">详情
						</el-button>
						<el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

		</template>
		<!-- 添加和编辑的弹窗都在这里 -->
		<el-dialog :title="flag?'添加':'编辑'" :visible.sync="dialogVisible" width="50%">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
				class="demo-ruleForm" id="addfrom">
				<el-form-item label="优惠券名称" prop="name">
					<el-input v-model="ruleForm.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="介绍">
					<el-input v-model="ruleForm.desc" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="标签">
					<el-input v-model="ruleForm.tag" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="最低消费">
					<el-input clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder=""
						v-model="ruleForm.min">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="满减金额">
					<el-input clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder=""
						v-model="ruleForm.discount">
						<template slot="append">元</template>
					</el-input>
				</el-form-item>
				<el-form-item label="每人限领">
					<el-input clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder=""
						v-model="ruleForm.limit">
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
				<el-form-item label="分发类型" width="200px" id="sel">
					<el-select v-model="value3" placeholder="请选择优惠券类型">
						<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="优惠券数量">
					<el-input clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder=""
						v-model="ruleForm.total">
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
				<el-form-item label="有效期">
					<template>
						<el-radio-group v-model="limitTime" style="margin-bottom: 30px;">
							<el-radio-button label="0">领券相对天数</el-radio-button>
							<el-radio-button label="1">指定生效时间</el-radio-button>
						</el-radio-group>
						<br>
						<template class="day" v-if="limitTime==0">
							<el-input clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder=""
								v-model="ruleForm.day">
								<template slot="append">天</template>
							</el-input>
						</template>
						<template v-if="limitTime==1">
							<div class="block">
								<el-date-picker v-model="timeValue" type="date" placeholder="选择日期">
								</el-date-picker>
							</div>
							至
							<div class="block">
								<el-date-picker v-model="timeValue2" type="date" placeholder="选择日期">
								</el-date-picker>
							</div>
						</template>
					</template>
				</el-form-item>
				<el-form-item label="商品限制范围">
					<template>
						<el-radio-group v-model="power" style="margin-bottom: 30px;">
							<el-radio-button label="0">全场通用</el-radio-button>
							<el-radio-button label="1">指定分类</el-radio-button>
							<el-radio-button label="2">指定商品</el-radio-button>
						</el-radio-group>
					</template>
					<div v-if="power!=0">
						暂时不支持

					</div>
				</el-form-item>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>

		<template>
			<!-- 这里是分页功能 -->
			<div class="block2">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>

		</template>

	</div>
</template>

<script>
	import {
		allCoupon,
		addCopon,
		upCopon,
		delCopon
	} from '../../https/promotion'
	export default {
		data() {
			return {
				// 优惠券的标题
				cTitle: '',
				// 优惠券类型的选择框
				options: [{
					value: 0,
					label: '通用领券'
				}, {
					value: 1,
					label: '注册用券'
				}, {
					value: 2,
					label: '兑换码'
				}],
				value: '',
				// 优惠券的服务选择
				options2: [{
					value: 0,
					label: '正常'
				}, {
					value: 1,
					label: '已过期'
				}, {
					value: 2,
					label: '已下架'
				}, ],
				value2: '',
				// 这是添加的通用优惠券
				options3: [{
					value: 0,
					label: '通用领券'
				}, {
					value: 1,
					label: '注册用券'
				}, {
					value: 2,
					label: '兑换码'
				}],
				value3: 0,
				// 表格的数据
				tableData: [],
				//弹窗1是否展示
				dialogVisible: false,
				ruleForm: {
					// 优惠券名称
					name: '',
					// 描述
					desc: '',
					// 标签
					tag: '',
					// 最低消费
					min: 0,
					// 满减
					discount: 0,
					// 限领
					limit: 0,
					// 优惠券数量
					total: 0,
					// 修改天数
					day: 0,
				},
				rules: {
					name: [{
						trigger: 'blur',
						required: true,
						message: '优惠券名称不能为空'
					}],

				},
				// 有效时间
				limitTime: 0,
				// 选择的时间
				timeValue: '',
				// 时间二
				timeValue2: '',
				// 商品限制范围
				power: 0,
				// 选择是编辑还是添加
				flag: true,
				// 优惠券id
				id: '',
				// 默认选中的页码
				page: 1,
				// 展示的条数
				limit: 10,
				// 总条数
				total: 0



			}
		},
		methods: {
			// 方法
			// 查询方法	
			searchCou() {
				let params = {
					page: this.page,
					limit: this.limit,
					// 优惠券标题
					name: this.cTitle,
					// 类型
					type: this.value,
					// 状态
					status: this.value2
				}
				this.selectALl(params)
			},
			// 添加优惠券的方法
			addCoupon() {
				// 弹框是否展示
				this.dialogVisible = true

			},
			// 添加和修改的表单
			submitForm(formName) {
				if (this.flag) {
					this.$refs[formName].validate((valid) => {

						if (valid) {
							alert('submit!');
							let params = {
								// 优惠卷名称
								name: this.ruleForm.name,
								// 介绍
								desc: this.ruleForm.desc,
								// 标签,
								tag: this.ruleForm.tag,
								// 优惠卷数量
								total: this.ruleForm.total,
								// 满减
								discount: this.ruleForm.discount,
								//最低消费
								min: this.ruleForm.min,
								//限领
								limit: this.ruleForm.limit,
								// 优惠券的类型
								type: this.value3,
								// 优惠券状态（正常）
								status: 0,
								//商品使用范围（power也可以）
								goodsType: 0,
								goodsValue: [],
								timeType: this.limitTime,
								days: this.ruleForm.day,
								startTime: this.timeValue,
								endTime: this.timeValue2,
							}
							addCopon(params).then(res => {

								console.log("提交成功", res)
								this.selectALl()
							}).catch(err => {
								console.log("我是添加错误", err)
							})

							this.dialogVisible = false

						} else {
							console.log('error submit!!');
							return false;
						}
					});
				} else {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							alert('submit!');
							let params = {
								//优惠券id
								id: this.id,
								// 优惠卷名称
								name: this.ruleForm.name,
								// 介绍
								desc: this.ruleForm.desc,
								// 标签,
								tag: this.ruleForm.tag,
								// 优惠卷数量
								total: this.ruleForm.total,
								// 满减
								discount: this.ruleForm.discount,
								//最低消费
								min: this.ruleForm.min,
								//限领
								limit: this.ruleForm.limit,
								// 优惠券的类型
								type: this.value3,
								// 优惠券状态（正常）
								status: 0,
								//商品使用范围（power也可以）
								goodsType: 0,
								goodsValue: [],
								timeType: this.limitTime,
								days: this.ruleForm.day,
								startTime: this.timeValue,
								endTime: this.timeValue2,
							}
							upCopon(params).then(res => {
								console.log("提交成功1", res)
								this.selectALl()
							}).catch(err => {
								console.log("我是添加错误", err)
							})

							this.dialogVisible = false

						} else {
							console.log('error submit!!');
							return false;
						}
					});
				}

			},
			// 查询所有优惠券列表的方法
			selectALl(params) {
				allCoupon(params).then(res => {
					console.log("请求成功", res)
					this.tableData = res.data.data.list
					this.total = res.data.data.total

				}).catch(err => {
					console.log("请求失败", err)
				})
			},
			handleDetail(index, row) {
				// 详情
				console.log("详情", row)
				// 跳转路由
				this.$router.push({
					path: '/promotion/couponDetail',
					query: {
						id: row.id
					}
				})

			},


			handleEdit(index, row) {
				// 编辑
				this.dialogVisible = true
				console.log("编辑", row)
				// 改变布尔值
				this.flag = false
				// 对数据进行获取
				this.id = row.id
				// 优惠卷名称
				this.ruleForm.name = row.name
				// 介绍
				this.ruleForm.desc = row.desc
				// 标签,
				this.ruleForm.tag = row.tag
				// 优惠卷数量
				this.ruleForm.total = row.total
				// 满减
				this.ruleForm.discount = row.discount
				//最低消费
				this.ruleForm.min = row.min
				//限领
				this.ruleForm.limit = row.limit
				// 优惠券的类型
				this.value3 = row.type
				// 优惠券状态（正常）
				this.limitTime = row.timeType
				this.ruleForm.day = row.days
				this.timeValue = row.startTime
				this.timeValue2 = row.endTime

			},
			handleDelete(index, row) {
				// 删除
				console.log("删除", row)
				let params = {
					id: row.id
				}
				delCopon(params).then(res => {
					console.log("删除完毕", res)
					this.selectALl()
				}).catch(err => {

				})
			},
			// 分页功能
			handleSizeChange(val) {
				// 分页改变显示数据
				// console.log(`每页 ${val} 条`);
				this.limit = val
				let params = {
					page: this.page,
					limit: this.limit,
					name: this.cTitle,
					type: this.value
				}
				this.selectALl(params)

			},
			handleCurrentChange(val) {
				// 当前页码的数据
				// console.log(`当前页: ${val}`);
				this.page = val
				let params = {
					page: this.page,
					limit: this.limit,
					name: this.cTitle,
					type: this.value
				}
				this.selectALl(params)
			},


		},
		mounted() {
			// 挂载
			this.selectALl()
		},
		watch: {
			dialogVisible(newValue, older){
				// 监听变化清空列表
				this.$refs.ruleForm.resetFields()
			}
		}


	}
</script>

<style>
	.role-head {
		margin-bottom: 15px;
		min-width: 500px;
		overflow: hidden;
	}

	.role-head .el-input {
		width: 180px !important;
		margin-right: 10px;
	}

	#addfrom .el-input {
		width: 300px;
	}

	/* 表单里面的输入框 */
	#addfrom .el-input__inner {
		width: 300px;
	}

	#addfrom .el-form-item__label {
		font-weight: bolder;
	}

	#sel .el-input__inner {
		width: 200px;
	}

	#sel .el-input {
		width: 200px;
	}

	.block {
		display: inline-block !important;
		width: 137px;
	}

	.block2 {
		margin-top: 20px;
	}

	#addfrom .block .el-input__inner {
		width: 137px;
	}
</style>
